<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>九江学院党委组织部</title>
    <link rel="stylesheet" href="./style/normalize.css">
    <link rel="stylesheet" href="./style/main.css">
</head>



<body>
    <header class="top">
            <div class="top_logo_search">
                <a href="index.html">
                    <!-- <img src="./img/top_bg1.jpg" alt="材料科学与工程学院" title="材料科学与工程学院"> -->
                </a>
                <div class="search">
                    <form action="post">
                        2023年10月12日  星期三
                    </form>
                </div>
            </div>
    </header>

    <nav>
        <ul class="flex_box flex_box_a1">
            <li><a href="#" title="网站首页" class="w">首页</a></li>
            <li class="in_li "><a href="" title="学院概况" class="">人才工作</a></li>
            <li class="in_li"><a href="" title="师资队伍">工作动态</a></li>
            <li class="in_li"><a href="" title="人才培养">通知公告</a></li>
            <li class="in_li"><a href="" title="科学科研">组织建设</a></li>
            <li class="in_li"><a href="" title="科学科研">干部工作</a></li>
            
        </ul>
        <ul class="flex_box flex_box_a2">

            <li  class="in_li shouye1"><a href="" title="学院概况">&nbsp; &nbsp;</a></li>
            <li class="in_li"><a href="index1.html" title="师资队伍">部门概况</a></li>
            <li class="in_li"><a href="" title="人才培养">机关党委</a></li>
            <li class="in_li"><a href="" title="科学科研">党校</a></li>
            <li class="in_li"><a href="" title="学生之家">乡村振兴</a></li>
            <li class="in_li"><a href="" title="科学科研">下载中心</a></li>
      </ul >
    </nav>
  
    <main>
      

            
        <!-- 学院新闻-->
        <section class="content1_box">

            <div class="content1_main">
                <!-- div放轮播图片 -->
                <!-- <div class="swiper2">
                    <a href="#"> <img src="./imag/swiper1.jpg" alt="" style="display: none;" class="my-class"></a>
                    <a href="#"><img src="./imag/swiper2.jpg" alt=""  style="display: none;" class="my-class"></a>
                    <a href="#"><img src="./imag/swiper3.jpg" alt="" class="my-class"></a>
                    <a href="#"><img src="./imag/swiper4.jpg" alt="" style="display: none;" class="my-class"></a>
                    <a href="#"><img src="./imag/swiper5.jpg" alt="" style="display: none;" class="my-class"></a>
                </div> -->
                <!-- <div class="content1_main_img">
                    <img src="./img/l1.jpg" alt="">
                    <img src="./img/l2.jpg" alt="">
                    <img src="./img/l2.jpg" alt="">
                    <img src="./img/l4.png" alt="">
                    <img src="./img/l5.png" alt="">
                    <img src="./img/l6.png" alt="">
                </div>
                 -->
                 <div id="container">
                    <ul class="parent" style="left: 0;">
                        <li><img src="./img/l1.jpg">></li>
                        <li><img src="./img/l2.jpg"></li>
                        <li><img src="./img/l4.png"></li>
                        <li><img src="./img/l5.png"></li>
                        <li><img src="./img/l6.png"></li>
                    </ul>
                
                    <div class="btnLeft">&lt;</div>
                    <div class="btnRight">&gt;</div>
                    <div class="modal">
                        <div class="title">
                            <h2></h2>
                        </div>
                        <div class="dots">
                            <ul class="clearfix">
                                <li class="on"></li>
                                <li class="off"></li>
                                <li class="off"></li>
                                <li class="off"></li>
                                <li class="off"></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <script type="text/javascript">
                    
                var imgShow = document.getElementsByClassName('parent')[0],
                    dotList = document.querySelectorAll('.dots >.clearfix > li');
                var btnLeft = document.getElementsByClassName('btnLeft')[0],
                    btnRight = document.getElementsByClassName('btnRight')[0];
                var dotLen = dotList.length,
                    index = 0; //轮播层的图片索引，0表示第一张
                
                //圆点显示
                function showRadius() {
                    for(var i = 0; i < dotLen; i++) {
                        if(dotList[i].className === "on"){
                            dotList[i].className = "off";
                        }
                    }
                    dotList[index].className = "on";
                }
                
                //向左移动
                btnLeft.onclick = function() {
                    index--;
                    if(index < 0){  /*第1张向左时，变为第5张*/
                        index = 4;
                    }
                    showRadius();
                    var left;
                    var imgLeft = imgShow.style.left;
                    if(imgLeft === "0px") { /*当是第1张时，每张图片左移，移4张图，位置为-(4*500)*/
                        left = -2000;
                    }
                    else{
                        left = parseInt(imgLeft) + 500; /*由于left为负数，每左移一张加500*/
                    }
                    imgShow.style.left = left + "px";
                }
                
                //向右移动
                btnRight.onclick = function() {
                    index++;
                    if(index > 4){  /*第5张向右时，变为第1张*/
                        index = 0;
                    }
                    showRadius();
                    var right;
                    var imgLeft = imgShow.style.left;
                    if(imgLeft === "-2000px") { /*当是第5张时，第1张的位置为0*/
                        right = 0;
                    }
                    else{
                        right = parseInt(imgLeft) - 500; /*由于left为负数，每右移一张减500*/
                    }
                    imgShow.style.left = right + "px";
                }
                
                // 自动轮播
                var timer;
                function autoPlay() {
                    timer = setInterval(function() {
                        var right;
                        var imgLeft = imgShow.style.left;
                        if(imgLeft === "-2000px") {
                            right = 0;
                        }
                        else{
                            right = parseInt(imgLeft) - 500;
                        }
                        imgShow.style.left = right + "px";
                    } ,3000)
                }
                autoPlay();
                
                for(var i = 0; i < dotLen; i++) {
                    /*利用闭包传递索引*/
                    (function(i) {
                        dotList[i].onclick = function() {
                            var dis = index - i; //当前位置和点击的距离
                            imgShow.style.left = (parseInt(imgShow.style.left) + dis * 500) + "px";
                            index = i; //显示当前位置的圆点
                            showRadius();
                        }
                    })(i);
                }
                
                </script>
               
                
               
            </div>

        </section>
        <!-- 工作动态 -->
        <section class=" content7_box">
            <div class="content8_header">
                <div class="content4_header_1">
                    <h2>工作动态</h2>
                </div>
                
                <div class="content4_header_1 tongzhi">
                    <h2>通知公告</h2>
                </div>
                
            </div>

            <div class="content2_main">
                <ul>
                    <li>
                        <a href="" title="喜迎二十大 奋进新征程">喜迎二十大 奋进新征程</a>
                        <span>2022-10-11</span>
                    </li>
                    <li>
                        <a href="" title="学校举办2023年下半年发展对象培训班">学校举办2023年下半年发展对象培训班</a>
                        <span>2022-10-10</span>
                    </li>
                    <li>
                        <a href="" title="学校召开专职组织员例会">学校召开专职组织员例会</a>
                        <span>2022-10-07</span>
                    </li>
                    <li>
                        <a href="" title="校党委书记李明斌会见武宁县鲁溪镇双新村村两委及我校驻村工...">校党委书记李明斌会见武宁县鲁溪镇双新村村两委及我校驻村工...</a>
                        <span>2022-10-06</span>
                    </li>
                    <li>
                        <a href="" title="组织部（机关党委、党校）召开新学期工作会议">组织部（机关党委、党校）召开新学期工作会议</a>
                        <span>2022-10-06</span>
                    </li>
                    <li>
                        <a href="" title="学校举办基层党组织书记培训班">学校举办基层党组织书记培训班</a>
                        <span>2022-09-28</span>
                    </li>
                    <li>
                        <a href="" title="机关党委一总支二支部开展“弘扬抗洪精神 汲取奋进力量”主题...">机关党委一总支二支部开展“弘扬抗洪精神 汲取奋进力量”主题...</a>
                        <span>2022-07-01</span>
                    </li>
                  
                </ul>
            </div>
            
        </section>

        <!-- 工作动态 -->
        <section class="content4_box">
            <div class="content4_header">
                    <div class="content4_header_1">
                        <h2>组织建设</h2>
                    </div>
                    <div class="content4_header_2"></div>

                    <a href=""><span>MORE&nbsp;>></span></a>
            </div>

            <div class="content4_main">
                <ul>
                    <li>
                        <a href="" title="学校召开党建工作领导小组会">学校召开党建工作领导小组会</a>
                        <span>09-26</span>
                    </li>
                    
                    <li>
                        <a href="" title="图解：如何开好组织生活会">图解：如何开好组织生活会</a>
                        <span>09-25</span>
                    </li>
                    
                    <li>
                        <a href="" title="我校党支部书记、专职组织员培训班暨教师党支部书记...">我校党支部书记、专职组织员培训班暨教师党支部书记...</a>
                        <span>9-13</span>
                    </li>
                    
                    <li>
                        <a href="" title="喜报！我校多个团队在全省高校“红色走读”活动中获奖">喜报！我校多个团队在全省高校“红色走读”活动中获奖</a>
                        <span>09-11</span>
                    </li>
                    
                    <li>
                        <a href="" title="“学校召开基层党委换届动员部署会">学校召开基层党委换届动员部署会</a>
                        <span>07-05</span>
                    </li>
                </ul>
            </div>
    
        </section>
        <!-- 公示 -->
        <section class="content4_box">
            <div class="content4_header">
                <div class="content4_header_1">
                    <h2>干部工作</h2>
                </div>
                <div class="content4_header_2"></div>
                <a href=""><span>MORE&nbsp;>></span></a>
            </div>

            <div class="content4_main">
                <ul>
                    <li>
                        <a href="" title="学校举行新任处级干部集体谈话会">学校举行新任处级干部集体谈话会</a>
                        <span>10-20</span>
                    </li>
                    <li>
                        <a href="" title="学校处级干部学习贯彻党的十九届五中全会精神培训班...">学校处级干部学习贯彻党的十九届五中全会精神培训班...</a>
                        <span>10-14</span>
                    </li>
                    <li>
                        <a href="" title="校党委副书记魏立平为新提任处科级干部作专题辅导报告">校党委副书记魏立平为新提任处科级干部作专题辅导报告</a>
                        <span>03-25</span>
                    </li>
                    <li>
                        <a href="" title="在重大考验中考察识别干部">在重大考验中考察识别干部</a>
                        <span>11-12</span>
                    </li>
                    <li>
                        <a href="" title="中共中央办公厅印发《党政领导干部考核工作条例》">中共中央办公厅印发《党政领导干部考核工作条例》</a>
                        <span>10-26</span>
                    </li>
                </ul>
            </div>

        </section>

         <!-- 公示 -->
         <section class="content4_box">
            <div class="content4_header">
                <div class="content4_header_1">
                    <h2>人才工作</h2>
                </div>
                <div class="content4_header_2"></div>
                
                <a href=""><span>MORE&nbsp;>></span></a>
            </div>

            <div class="content4_main">
                <ul>
                    <li>
                        <a href="" title="“九江人才20条”政策新修订的23个配套文件">“九江人才20条”政策新修订的23个配套文件</a>
                        <span>10-20</span>
                    </li>
                    <li>
                        <a href="" title="中共九江市委    九江市人民政府印发《关于打造长江....">中共九江市委    九江市人民政府印发《关于打造长江...</a>
                        <span>10-14</span>
                    </li>
                    <li>
                        <a href="" title="关于印发《赣鄱俊才支持计划_青年科技人才托举项目实...">关于印发《赣鄱俊才支持计划_青年科技人才托举项目实...</a>
                        <span>03-25</span>
                    </li>
                    <li>
                        <a href="" title="关于印发《赣鄱俊才支持计划·高校领军人才培养项目实...">关于印发《赣鄱俊才支持计划·高校领军人才培养项目实...</a>
                        <span>11-12</span>
                    </li>
                    <li>
                        <a href="" title="校领导春节前夕走访慰问我校高层次人才代表">校领导春节前夕走访慰问我校高层次人才代表</a>
                        <span>10-26</span>
                    </li>
                </ul>
            </div>

        </section>
        <!-- 快速通道 -->
        <section class="content5_box">
            <div class="content5_header">
                <div class="content5_header_1">
                    <h2>快速通道</h2>
                </div>
                
            </div>

            <div class="content5_main">
                <img src="./img/gbwlxy.jpg" alt="">
                <img src="./img/wsdx.jpg" alt="">
                <!-- <ul>
                    <li><a href="" title="常用下载"><img src="./imag/img1.jpg" alt="常用下载" title="常用下载"></a></li>
                    <li><a href="" title="公共服务"><img src="./imag/img2.jpg" alt="公共服务" title="公共服务"></a></li>
                </ul> -->
            </div>
        </section>
    </main>

 <!-- 公示 -->
 <section class="content6_box">

</section>

    </div>
    <footer>
        <div class="content_footer">
            <address>        
                <ul class="img">
                    <img src="./img/jjxy.png" alt="">
                </ul>  
            </address>
            <ul>
                <li>九江学院党委组织所有</li>
                
            </ul> 
        </div>

    </footer>

</body>
</html>

<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	ul{
		list-style: none;
	}
	a{
        text-decoration: none;
    }
	#container{
		position: relative;
		width: 500px;
		height: 260px;
		margin: 20px auto;
		overflow: hidden; /*溢出隐藏：只显示一张图片*/
	}
	#container .parent{
		position: absolute;
		width: 2500px; /*整个图片层长度：500*5=2500*/
		height: 260px;
	}
	
	#container .parent li{
		float: left;
		width: 500px;
		height: 100%;
	}
	#container .parent li img{
		width: 733px;
		height: 338px;
	}
	#container .btnLeft,
	#container .btnRight{
		width: 30px;
	    height: 30px;
	    background-color: #9E9E9E;
	    border-radius: 20%;
	    opacity: 80%;
	    position: absolute; /*包含块为图片显示层container*/
	    top: 0;
	    bottom: 0;
	    margin: auto;
	    font-size: 20px;
   	 	color: #f40;
   	 	text-align: center;
   	 	line-height: 30px;
	}
	#container .btnLeft{
	    left: 10px;
	}
	#container .btnRight{
		right: 10px;
	}
	#container .btnLeft:hover,
	#container .btnRight:hover{
		opacity: 90%;
		cursor: pointer;
	}
	/*蒙层*/
	#container .modal{
		width: 100%;
		height: 40px;
		background: rgba(0,0,0,.3);
		position: absolute;
		left: 0;
		bottom: 0;
		line-height: 40px;
		padding: 0 40px;
		box-sizing: border-box;
	}
	#container .modal .title{
		float: left;
		color: #fff;
		font-size: 12px;
	}
	#container .modal .dots{
		float: right;
		position: absolute;
		bottom: 10px;
		left: 340px;
	}
	#container .modal .dots li{
		width: 15px;
		height: 15px;
		border-radius: 50%;
		float: left;
		/*可以使用行块盒*/
		/*display: inline-block;*/
		margin: 0 5px;
		cursor: pointer;
	}
	.clearfix::after{
		content: "";
		display: block;
		clear: both;
	}
	.on{
		background-color: red;
	}
	.off{
		background-color: gray;
	}
</style>
